import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: '第10课 - 动画与交互',
        theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.pink),
        home: const Lesson10Page(),
      );
}

class Lesson10Page extends StatefulWidget {
  const Lesson10Page({super.key});
  @override
  State<Lesson10Page> createState() => _Lesson10PageState();
}

class _Lesson10PageState extends State<Lesson10Page>
    with SingleTickerProviderStateMixin {
  bool _toggle = false;
  late final AnimationController _controller = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 600),
    lowerBound: 0.9,
    upperBound: 1.1,
  )..repeat(reverse: true);

  late final Animation<double> _pulse = CurvedAnimation(
    parent: _controller,
    curve: Curves.elasticOut,
  );

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('动画与交互')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            AnimatedSwitcher(
              duration: const Duration(milliseconds: 300),
              transitionBuilder: (child, anim) {
                final slide = Tween<Offset>(
                  begin: const Offset(0.0, 0.2),
                  end: Offset.zero,
                ).chain(CurveTween(curve: Curves.easeOut)).animate(anim);
                return SlideTransition(position: slide, child: child);
              },
              child: Text(
                _toggle ? 'Flutter 动画真有趣！' : '点击下方按钮切换文本',
                key: ValueKey(_toggle),
                style: const TextStyle(fontSize: 18),
              ),
            ),
            const SizedBox(height: 20),
            ScaleTransition(
              scale: _pulse,
              child: const Icon(Icons.favorite, color: Colors.red, size: 48),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _toggle = !_toggle),
        child: const Icon(Icons.play_arrow),
      ),
    );
  }
}